<template>
  <div>
    <router-view :tongbu="tongbu" @item-remove="remove" @item-login="login">
    </router-view>
    <div class="bottom">
      <router-link
        :to="`/homes/home?isLogin=${isLogin}`"
        class="ico1"
        active-class="active1"
      >
        <p>首页</p>
      </router-link>
      <router-link
        :to="`/homes/books?isLogin=${isLogin}`"
        class="ico2"
        active-class="active2"
      >
        <p>书架</p>
      </router-link>
      <router-link
        :to="`/homes/my?isLogin=${isLogin}`"
        class="ico3"
        active-class="active3"
      >
        <p>我的</p>
      </router-link>
    </div>
  </div>
  <!-- 底部 -->
</template>

<script>
export default {
  name: "BottomMenu",
  data() {
    return {
      arr: [],
      isLogin: false,
    };
  },
  components: {},
  props: ["tongbu"],
  methods: {
    remove(arr) {
      this.arr = arr;
      this.$emit("item-remove", this.arr);
    },
    login(item) {
      this.isLogin = item;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/static/common/base.scss";
// 底部
.bottom {
  padding: $p;
  padding-top: 2vw;
  padding-bottom: 2vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 999;
  background-color: $bgc;
  a {
    display: block;
    height: 12vw;
    width: 6.6667vw;
    div {
      width: 6.6667vw;
      height: 6.6667vw;
    }

    p {
      text-align: center;
      font-size: 2.6667vw;
      margin-top: 6.6667vw;
    }
  }
  .ico1 {
    background: url("@/assets/首页.png") no-repeat top center;
    background-size: 100%;
  }
  .ico2 {
    background: url("@/assets/书架.png") no-repeat top center;
    background-size: 100%;
  }
  .ico3 {
    background: url("@/assets/我的.png") no-repeat top center;
    background-size: 100%;
  }
  .active1 {
    color: #fff;
    background: url("@/assets/首页2.png") no-repeat top center;
    background-size: 100%;
  }
  .active2 {
    color: #fff;
    background: url("@/assets/书架2.png") no-repeat top center;
    background-size: 100%;
  }
  .active3 {
    color: #fff;
    background: url("@/assets/我的2.png") no-repeat top center;
    background-size: 100%;
  }
}
</style>